<!--
 * @description: 文件描述
 * @version: 0.0.1
 * @author: xxx
 * @Date: 2025-02-27 09:57:16
-->
<template>
  <div>
    <!-- <el-button type="primary" @click="addChange">新增</el-button> -->
    <!-- <el-button type="primary" @click="deleteId(30)">删除</el-button> -->
    <tableCommodityList
      :list="commodity.list"
      :columns="commodity.columns"
      @command="changeCommand"
      :loading="commodity.loading"
      :maxHeight="640"
    />

    <!-- <el-pagination
      class="pagination"
      v-model:current-page="pageQuery.current"
      v-model:page-size="pageQuery.size"
      layout="prev, pager, next, jumper"
      :total="pageQuery.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->

    <videoCodeDialog
      v-model="fromDialog.dialog"
      :title="fromDialog.state"
      :itemRow="fromDialog.itemRow"
      @addChange="formAdd"
      @editChange="formEdit"
      :formData="JSON.parse(records?.jsonData || '{}')"
    />
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { getListApi, addApi, updateApi, deleteApi } from "../utils/api";
import element from "@/utils/element";
// 微信：单独俩参数 path query
const commodity = ref({
  list: [],
  columns: [
    {
      prop: "videoTitle",
      label: "视频标题",
      align: "center",
    },
    {
      prop: "src",
      label: "视频链接",
      align: "center",
    },
    {
      prop: "poster",
      label: "封面图链接",
      align: "center",
      imgShow: true,
    },

    {
      prop: "showLogo",
      label: "logo状态",
      align: "center",
    },

    {
      prop: "createTime",
      label: "创建时间",
      width: "200px",
      align: "center",
    },
    {
      prop: "updateTime",
      label: "更新时间",
      width: "200px",
      align: "center",
    },
    {
      prop: "operation",
      label: "操作",
      width: "80px",
      align: "center",
      align: "center",
      operation: [
        {
          size: "small",
          type: "primary",
          text: true,
          character: "编辑",
        },
        // {
        //   size: "small",
        //   type: "danger",
        //   text: true,
        //   character: "删除",
        // },
      ],
    },
  ],
  loading: false,
});
/**
 * 操作事件
 * */
const changeCommand = (row, scope) => {
  switch (scope.character) {
    case "编辑":
      formEditChange(row, scope);
      break;
    case "删除":
      formDeleteChange(row);
      break;
    default:
      break;
  }
};
const fromDialog = reactive({
  dialog: false,
  state: "",
  itemRow: {},
});
const pageQuery = reactive({
  size: 10,
  current: 1,
  total: 0,
});
const records = ref(null);
const handleSizeChange = (val) => {
  pageQuery.size = val;
  getList();
};
const handleCurrentChange = (val) => {
  pageQuery.current = val;
  getList();
};
const addChange = () => {
  fromDialog.dialog = true;
  fromDialog.state = "新增";
};
const deleteId = async (val) => {
  const res = await deleteApi(val);
  getList();
};
// 新增
const formAdd = async (formData) => {
  // 没有去添加一项
  if (!records.value) {
    const jsonData = [];
    jsonData.push(formData);
    const data = {
      title: "视频配置页面",
      type: "video_BOOT",
      jsonData: JSON.stringify(jsonData),
    };
    const res = await addApi(data);
    if (res.success && res.code == 200) {
      element.toast("新增成功", "success");
    } else {
      element.toast("新增失败", "error");
    }
  } else {
    // 有的话去走修改接口 添加
    const data = {
      id: records.value.id,
      title: "视频配置页面",
      jsonData: JSON.parse(records.value.jsonData),
    };
    data.jsonData.unshift(formData);
    data.jsonData = JSON.stringify(data.jsonData);
    const res = await updateApi(data);
    if (res.success && res.code == 200) {
      element.toast("新增成功", "success");
    } else {
      element.toast("新增失败", "error");
    }
  }
  getList();
};
// 编辑
const formEditChange = async (row, scope) => {
  fromDialog.itemRow = JSON.parse(JSON.stringify(row));
  fromDialog.dialog = true;
  fromDialog.state = "编辑";
  getList();
};

// 编辑 提交
const formEdit = async (formData) => {
  let list = JSON.parse(records.value.jsonData);
  const editIndex = list.findIndex((i) => i.index == formData.index);
  list[editIndex] = formData;
  const data = {
    id: records.value.id,
    title: "视频配置页面",
    jsonData: JSON.stringify(list),
  };
  const res = await updateApi(data);
  getList();
  if (res.success && res.code == 200) {
    element.toast("编辑成功", "success");
  } else {
    element.toast("编辑失败", "error");
  }
};
// 删除
const formDeleteChange = async (row) => {
  fromDialog.state = "删除";
  const List = commodity.value.list.filter((i) => i.index != row.index);
  const data = {
    id: records.value.id,
    title: "视频配置页面",
    jsonData: JSON.stringify(List),
  };
  const res = await updateApi(data);
  getList();
  if (res.success && res.code == 200) {
    element.toast("删除成功", "success");
  } else {
    element.toast("删除失败", "error");
  }
  getList();
};

onMounted(() => {
  getList();
});

const tableList = ref([
  {
    videoTitle: "",
    src: "",
    poster: "",
    showLogo: true,
    createTime: new Date().getTime(),
    updateTime: "",
    index: 1,
    isVideo: true,
  },
  {
    videoTitle: "",
    src: "",
    poster: "",
    showLogo: true,
    createTime: new Date().getTime(),
    updateTime: "",
    index: 2,
    isVideo: true,
  },
  {
    videoTitle: "",
    src: "",
    poster: "",
    showLogo: true,
    createTime: new Date().getTime(),
    updateTime: "",
    index: 3,
    isVideo: true,
  },
  {
    videoTitle: "",
    src: "",
    poster: "",
    showLogo: true,
    createTime: new Date().getTime(),
    updateTime: "",
    index: 4,
    isVideo: true,
  },
  {
    videoTitle: "",
    src: "",
    poster: "",
    showLogo: true,
    createTime: new Date().getTime(),
    updateTime: "",
    index: 5,
    isVideo: false,
  },
]);
const getList = async () => {
  commodity.value.loading = true;
  try {
    const res = await getListApi({ pageQuery });
    if (res.code == 200 && res.success && res.data) {
      let data = res.data.records.find((i) => i.type === "video_BOOT");
      if (!data) {
        const data1 = {
          title: "视频配置页面",
          type: "video_BOOT",
          jsonData: JSON.stringify(tableList.value),
        };

        let res1 = await addApi(data1);
        if (res1.code == 200 && res1.success && res1.data) {
          data = res1.data.records.find((i) => i.type === "video_BOOT");
        }
      }
      records.value = data;
      commodity.value.list = JSON.parse(data.jsonData);
      pageQuery.total = JSON.parse(data.jsonData).length;
    }
  } catch (error) {
    console.log(error, "getList");
  }
  commodity.value.loading = false;
};
</script>
<style scoped></style>
